<template>
	<view>
		<view class="shop_item z-padding-lr-24 z-padding-t-24 z-radius-16 z-margin-b-24" @click="shopTap">
		  <image :src="cdn(info.logo_image)" class="shop_img z-flex-0 z-radius-16 z-margin-r-16" mode="aspectFill" lazy-load
		    lazy-load-margin="0" />
		  <view class="shop_item_info">
		    <view class="shop_item_info_top hidden">
		      {{info.abbr}}
		    </view>
		    <view class="rate">
		        <image src="../static/index/allstar.png" v-for="item in tool.parInt(info.commentScore)" class="star z-margin-r-8" mode="" />
		        <image src="../static/index/halfstar.png" v-if="!tool.full(info.commentScore)" class="star z-margin-r-8" mode="" />
		        <block v-if="!tool.full(info.commentScore)">
		          <image src="../static/index/nostar.png"  v-for="item in 5 - tool.parInt(info.commentScore) -1" class="star z-margin-r-8" mode="" />
		        </block>
		        <block v-else>
		          <image src="../static/index/nostar.png"  v-for="item in 5 - tool.parInt(info.commentScore)" class="star z-margin-r-8" mode="" />
		        </block>
		        <text class="z-font-w">{{tool.toFix(info.commentScore,1)}}</text>
		      </view>
		    <view class="shop_item_info_top text_999 z-font-22 z-margin-t-8">
		      <view  class="hidden">
		        {{info.city}}{{info.address}}
		      </view>
		      <view class="text_333">{{tool.toFix(info.distance)}}km</view>
		    </view>
		    <view class="shop_item_info_midea z-margin-tb-16">
		      <view class="shop_item_info_midea_item z-flex z-padding-lr-8 z-font-22 z-radius-4 text_999"
		        v-for="(item,index) in tool.split(info.categoryname)">
		        {{item}}
		      </view>
		    </view>
		    <view class="shop-goods z-flex-c z-padding-tb-16" v-for="(item,index) in info.goodsList">
		      <image src="/static/index/shopgoods.png" class="icon"></image>
		      <view class="price z-margin-lr-16 z-font-26">¥{{item.price}}</view>
		      <view class="text_999 z-flex-1 z-font-24 hidden">{{item.name}}</view>
		      <image src="/static/index/brey-more.png" class="more"></image>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['info'],
		data() {
			return {
			}
		},

		methods: {
			shopTap(){
				this.$emit('shopTap',this.info)
			    // this.triggerEvent('shopTap',this.data.info)
			}
		}
	}
</script>

<style lang="scss">
.shop_item{
  margin: 0 auto;
  background-color: #fff;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  position: relative;
}
.shop_img{
  width: 154rpx;
  height: 154rpx;
}
.shop_item_info{
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.shop_item_info_top{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.star{
  width: 24rpx;
  height: 24rpx;
}
.rate{
  color: var(--mainmoneycolor);
}
.shop_item_info_midea{
  display: flex;
  flex-wrap: wrap;
}
.shop_item_info_midea_item{
  height: 38rpx;
  line-height: 38rpx;
  margin-bottom: 8rpx;
  margin-right: 8rpx;
  background: #F5F7F9;
}


.position_img{
  width: 24rpx;
  height: 24rpx;
}


.shop-goods{
  border-top: 1px solid #EDEEF1;
  width: 100%;
  overflow: hidden;
}
.icon{
  width: 30rpx;
  height: 30rpx;
}
.price{
  color: #FF9600;
}
.more{
  width: 22rpx;
  height: 22rpx;
}
</style>